<template>
  <div class="createPost-container">
    <el-form :model="form" :rules="rules" label-width="120px" ref="levelForm">
        <div class="createPost-main-container">

          <el-form-item style="margin-bottom: 40px;" label-width="150px" label="等级名称:">
                <el-input v-model="form.name"  style="width:160px" placeholder="请输入等级名称"/>
              </el-form-item>

        <el-form-item style="margin-bottom: 40px;" label-width="150px" label="等级简介:">
                <el-input v-model="form.desc" :rows="2" type="textarea" style="width:500px" class="article-textarea" autosize placeholder="请添加等级简介信息" />
              </el-form-item>

         <el-form-item style="margin-bottom: 40px;" label-width="150px" label="级别:">
                  <el-input v-model="form.level" type="number" min="1" max="12" style="width:160px" placeholder="请输入级别 如:1"/>
              </el-form-item>

         <el-form-item style="margin-bottom: 40px;" label-width="150px" label="折扣:">
                <el-input v-model="form.discount" type="number" min="0" style="width:160px"/>
              </el-form-item>

          <el-form-item label="升级所需金额:" prop="money" label-width="150px">
                <el-input v-model="form.money" type="number"  min="0" placeholder="0" style="width:160px"/>
              </el-form-item>

          <el-form-item label="升级所需积分:" prop="point" label-width="150px">
                <el-input v-model="form.point" type="number" min="0" placeholder="0" style="width:160px"/>
              </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onSubmit('levelForm')" size="small">保 存</el-button>
          </el-form-item>
        </div>
    </el-form>
  </div>
</template>

<script>
  import {detail, createLevel as createLevelss, updateLevel} from '@/api/member/levels'
export default {
  data() {
    return {
      is_update:false,
      form: {
        id:0,
        name:"",
        level:"",
        discount:10,
        desc:"",
        point:"",
        money:"",
      },
      rules:{
        name:[{required: true, message: '名称不能为空', trigger: 'blur' }],
        level:[{required: true, message: '等级不能为空', trigger: 'blur' }],
        desc:[{required: true, message: '等级简介不能为空', trigger: 'blur' }],
      }
    }
  },
  beforeMount() {
    let id = this.$route.params.id || 0;
    if(id>0) this.init_levels(id)
  },
  methods: {
    async init_levels(id){
      this.is_update = true;
      await detail(id).then(response=>{
        this.form.id = response.data.id
        this.form.name = response.data.name
        this.form.level = response.data.level
        this.form.discount = response.data.discount
        this.form.desc = response.data.desc
        this.form.point = response.data.point
        this.form.money = response.data.money
      })
    },
    onSubmit:function(formName){
       this.$refs[formName].validate((valid)=>{
          if (valid) {
            this.checkSub()
            if(this.is_update){
              updateLevel(this.form).then(response => {
                if(response.code == 200){
                  this.$message({
                    message: '更新成功',
                    type: 'success'
                  })
                  setTimeout(()=>{
                    this.$router.push({name:'memberLevel'});
                  }, 200)
                }
              })
            }else{
              createLevelss(this.form).then(response => {
                if(response.code == 200){
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                  setTimeout(()=>{
                    this.$router.push({name:'memberLevel'});
                  }, 200)
                }
              })
            }
          }
       })
    },
    checkSub(){
      // 提交前的数据检测
      if (this.form.name.length < 1){
        return this.showTipsError('请填写等级名称');
      }

      if (this.form.desc.length < 1){
        return this.showTipsError('请填写简介信息');
      }
      return true;
    },
    showTipsError(message){
      this.$message({
        message: message,
        type: 'warning'
      })

      return false;
    },
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";
.line{
  text-align: center;
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}
.createPost-container {
  background: #fff;
  margin-top: 18px;
  height: 100%;
  min-height: calc(100vh - 68px);
  font-size: 12px
}

.createPost-container * {
  font-size: 12px;
}
</style>
